<template>
  <div class="content-box" v-loading="loading">
    <el-form :model="form" :rules="rules" ref="formRef" >
    <!-- 产品信息 -->
     <div class="productInformation">
        <div class="ch_title">产品信息</div>  
        <div class="content">
          <div class="flex-sb">
            <el-form-item label="机构产品名称" prop="productName" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.productName"
                placeholder="请输入"
                clearable
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="产品简称" prop="simpleName" style="width: 50%;">
              <el-input
                v-model="form.simpleName"
                placeholder="请输入"
                clearable
                :disabled="isView"
              />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item
               label="机构类型"
               prop="productType"
               style="width: 50%;margin-right: 35px;"
              >
               <el-select
                 v-model="form.productType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in productTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="关联下游公司" prop="companyId" style="width: 50%;">
              <el-select
               v-model="form.companyId"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="isAdd"
              >
                <el-option
                 v-for="(item, index) in companyIdOption"
                 :key="index"
                 :label="item.companyName"
                 :value="item.id"
                 ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item
               label="机构标签"
               prop="productLabel"
               style="width: 50%;padding-right: 20px;"
               :disabled="isView"
              >
               <el-select
                 v-model="form.productLabel"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
                 @change="changeSelect('isGap')"
               >
                 <el-option
                   v-for="(item, index) in productLabelOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item 
             v-if="[2].includes(form.productLabel)"
             label="推送间隔开关" prop="isGap" style="width: 50%;padding-left: 20px;">
                <el-radio-group v-removeAriaHidden v-model="form.isGap" :disabled="isView">
                  <el-radio 
                   @change="changeSelect([
                    [1].includes(form.isGap)?'checkTime':null,
                    [1].includes(form.isGap)?'pushTime':null,
                   ])"
                   v-for="(item,index) in isGapOption" 
                   :key="index" :label="item.value">{{ item.label }}
                  </el-radio>
                </el-radio-group>
            </el-form-item>
          </div>

          <div class="flex-sb" v-if="[1].includes(form.isGap)">
            <el-form-item label="撞库间隔（秒）" prop="checkTime" style="width: 50%;padding-right: 20px;">
              <el-input-number 
                v-model="form.checkTime" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="推送间隔（秒）" prop="pushTime" style="width: 50%;padding-left: 20px;">
              <el-input-number 
                v-model="form.pushTime" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
        </div>
          <div class="flex-sb">
            <el-form-item label="机构状态" prop="status" style="width: 50%;margin-right: 35px;">
              <el-select
                 v-model="form.status"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in statusOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="最短返回时长" prop="timeOut" style="width: 50%;">
              <el-input-number 
                v-model="form.timeOut" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="下游产品最低售价" prop="sellMoney" style="width: 50%;padding-right: 20px;">
              <el-input-number 
                v-model="form.sellMoney" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="可查询时间" prop="queryTime" style="width: 50%;padding-left: 20px;">
              <el-input-number 
                v-model="form.queryTime" 
                controls-position="right" 
                placeholder="请输入天数"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item label="手机号验证" prop="isPhone" style="width: 50%;margin-right: 35px;">
              <el-radio-group v-removeAriaHidden v-model="form.isPhone" :disabled="isView">
                <el-radio 
                 @change="changeSelect('phoneMoney')"
                 v-for="(item,index) in isBackOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.isPhone">
                <el-form-item label="手机号验证下游成交价" prop="phoneMoney" style="flex: 1;">
                  <el-input-number 
                    v-model="form.phoneMoney" 
                    controls-position="right" 
                    placeholder="请输入"
                    :min="0" 
                    :precision="2"
                    style="width: 100%;"
                    :disabled="isView"
                  >
                  </el-input-number>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="二要素验证" prop="isUser" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.isUser" :disabled="isView">
                <el-radio 
                 @change="changeSelect('userMoney')"
                 v-for="(item,index) in isBackOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.isUser">
                <el-form-item label="二要素验证下游成交价" prop="userMoney" style="flex: 1;">
                  <el-input-number 
                    v-model="form.userMoney" 
                    controls-position="right" 
                    placeholder="请输入"
                    :min="0" 
                    :precision="2"
                    style="width: 100%;"
                    :disabled="isView"
                  >
                  </el-input-number>
                </el-form-item>
              </div>
            </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="流程模式" prop="halfStatus" style="width: 50%;margin-right: 35px;">
              <el-radio-group v-removeAriaHidden v-model="form.halfStatus" :disabled="isView">
                <el-radio 
                 @change="changeSelect('halfType')"
                 v-for="(item,index) in halfStatusOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
             v-if="form.halfStatus"
             label="半流程（旧）推送模式" prop="halfType" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.halfType" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in halfTypeOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="掩码类型" prop="maskLen" style="width: 50%;padding-right: 20px;">
              <el-radio-group v-removeAriaHidden v-model="form.maskLen" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in maskLenOption" 
                 :key="index" 
                 :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="撞库类型" prop="isAll" style="width: 50%;padding-left: 20px;">
              <el-radio-group v-removeAriaHidden v-model="form.isAll" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isAllOption" 
                 :key="index" 
                 :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div class="flex-sb">
            <el-form-item label="车抵" prop="isCar" style="width: 50%;padding-right: 20px;">
              <el-radio-group v-removeAriaHidden v-model="form.isCar" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isCarOption" 
                 :key="index" 
                 :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <el-form-item label="产品logo" prop="logoUrl" style="width: 50%;margin-right: 35px;">
          <ImageUpload
           :value="form.logoUrl"
           :isShowTip="false"
           :limit="1"
           @input="fileUploadFunction"
          >
          </ImageUpload>
        </el-form-item>
        <div style="display: flex;">
            <el-form-item label="是否回调" prop="isBack" style="width: 50%;margin-right: 35px;">
              <el-radio-group
               @change="changeSelect(['backClass','backUrl'])"
               v-removeAriaHidden v-model="form.isBack" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isBackOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;"  v-if="form.isBack">
          <el-form-item  
              label="回调方法配置类" prop="backClass" style="width: 50%;margin-right: 35px;">
              <el-input
                :disabled="isView"
                v-model="form.backClass"
                placeholder="请输入"
                clearable
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item  
              label="回调地址" prop="backUrl" style="width: 50%">
              <el-input
                :disabled="isView"
                v-model="form.backUrl"
                placeholder="请输入"
                clearable
                style="width: 100%"
              />
            </el-form-item>
        </div>

          <div class="flex-sb">
            <el-form-item label="方案限制" prop="caseType" style="width: 50%;margin-right: 35px;">
              <el-select
                 v-model="form.caseType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in caseTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="每秒限流" prop="checkNum" style="width: 50%;">
              <el-input-number 
                v-model="form.checkNum" 
                controls-position="right" 
                placeholder="每秒限流（每秒钟可以撞库的次数）"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
          </div>
         
          <div class="flex-sb">
            <el-form-item label="外部加解密偏移量" prop="outAesIv" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.outAesIv"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="外部加解密消息体key" prop="outAesKey" style="width: 50%;">
              <el-input
                v-model="form.outAesKey"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="外部私钥" prop="outPrivateKey" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.outPrivateKey"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="外部公钥" prop="outPublicKey" style="width: 50%;">
              <el-input
                v-model="form.outPublicKey"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="数据接收限制" prop="pushType" style="width: 50%;margin-right: 35px;">
              <el-select
                 v-model="form.pushType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in pushTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="机构数据权重" prop="pushWeight" style="width: 50%;">
              <el-select
               v-model="form.pushWeight"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="isView"
              >
                <el-option
                 v-for="(item, index) in pushWeightOption"
                 :key="index"
                 :label="item.label"
                 :value="item.value"
                 ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="推送地址" prop="pushUrl" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.pushUrl"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="推送方法配置类" prop="pushClass" style="width: 50%;">
              <el-input
                v-model="form.pushClass"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
                />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="撞库地址" prop="checkUrl" style="width: 50%;margin-right: 35px;">
                <el-input
                v-model="form.checkUrl"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
                />
            </el-form-item>
             <el-form-item label="撞库方法配置类" prop="checkClass" style="width: 50%;">
              <el-input
                v-model="form.checkClass"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
                />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="下游渠道号" prop="deptCode" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.deptCode"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
                />
            </el-form-item>
            <el-form-item label="机构权重" prop="deptWeight" style="width: 50%;">
              <el-input-number 
                v-model="form.deptWeight" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="机构是否区间变价" prop="isChange" style="width: 50%;margin-right: 35px;">
              <el-select
                 v-model="form.isChange"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in isBackOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="授权文件名称" prop="authDocxName" style="width: 50%">
              <el-input
                v-model="form.authDocxName"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="授权文件格式" prop="isHtml" style="width: 50%;margin-right: 35px;">
              <el-radio-group  v-removeAriaHidden v-model="form.isHtml" :disabled="isView">
                <el-radio 
                  v-for="(item,index) in isHtmlOption" 
                  :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
             <el-form-item label="授权文件类型" prop="isMd5" style="width: 50%;">
              <el-radio-group  v-removeAriaHidden v-model="form.isMd5" :disabled="isView">
                <el-radio 
                  v-for="(item,index) in isMd5Option" 
                  :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="flex-sb">
            <el-form-item label="备注" prop="remarks" style="flex: 1;">
              <el-input
                v-model="form.remarks"
                placeholder="请输入"
                type="textarea"
                clearable
                :disabled="isView"
              />
            </el-form-item>
          </div>
        </div>  
     </div>
    <!-- 产品资料 -->
    <!-- <div class="productInformation" v-if="form.productType === 2">
      <div class="ch_title">产品资料</div>
      <div class="content">
        <el-form-item label="产品logo" prop="productAttach.productLogo" style="width: 50%;margin-right: 35px;">
          <ImageUpload
           :value="form.productAttach.productLogo"
           :isShowTip="false"
           :limit="1"
           @input="fileUploadFunction"
          >
          </ImageUpload>
        </el-form-item>
        <div class="flex-sb">
            <el-form-item label="机构产品名称" prop="productAttach.productName" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.productAttach.productName"
                placeholder="请输入"
                clearable
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="下游机构产品简介" prop="productAttach.productMsg" style="width: 50%;">
              <el-input
                v-model="form.productAttach.productMsg"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
        </div>
        <div class="flex-sb">
            <el-form-item label="最高可申请金额" prop="productAttach.applyMoney" style="width: 50%;margin-right: 35px;">
              <el-input-number 
                v-model="form.productAttach.applyMoney" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="个人信息授权书路径地址" prop="productAttach.authUrl" style="width: 50%;">
                <el-input
                v-model="form.productAttach.authUrl"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
                />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="郑重声明内容" prop="productAttach.claimMsg" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.productAttach.claimMsg"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="跳转时三方页面链接" prop="productAttach.jumpUrl" style="width: 50%;">
              <el-input
                v-model="form.productAttach.jumpUrl"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </div>

          <div class="flex-sb">
            <el-form-item label="年化率" prop="productAttach.yearRate" style="width: 50%;margin-right: 35px;">
              <el-input-number 
                v-model="form.productAttach.yearRate" 
                controls-position="right" 
                placeholder="请输入年化率（数字）"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="期数" prop="productAttach.yearRateStr" style="width: 50%;">
                <el-input
                v-model="form.productAttach.yearRateStr"
                placeholder="请输入期数（例如：3~24期）"
                clearable
                style="width: 100%"
                :disabled="isView"
                />
            </el-form-item>
          </div>
          <el-form-item label="标签集合" prop="productAttach.labelList" style="padding-bottom: 20px;" >
              <el-tag
              :key="index"
               v-for="(tag,index) in form.productAttach.labelList"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
                </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
           </el-form-item>


      </div>
    </div> -->
     <!-- 产品规则配置 -->
     <div class="productRuleConfiguration">
      <div class="ch_title">产品规则配置</div>
      <div class="content">
        <div style="display: flex;">
          <el-form-item label="检查前置条件" prop="productConfig.isFront" style="width: 50%;margin-right: 35px;">
            <el-radio-group  v-removeAriaHidden v-model="form.productConfig.isFront" :disabled="isView">
              <el-radio 
                v-for="(item,index) in isFrontOption" 
                :key="index" :label="item.value">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
       <template v-if="form.productConfig.isFront">
        <div style="display: flex;">
          <el-form-item
           label="必须满足的条件" prop="productConfig.mustHave" style="width: 50%;margin-right: 35px;">
            <el-checkbox-group
             @change="changeSelect([
              !form.productConfig.mustHave.includes('1')?'productConfig.sesame':null,
              !form.productConfig.mustHave.includes('2')?'productConfig.creditCard':null,
              !form.productConfig.mustHave.includes('3')?'productConfig.social':null,
              !form.productConfig.mustHave.includes('4')?'productConfig.fund':null,
              !form.productConfig.mustHave.includes('5')?'productConfig.baiTiao':null,
              !form.productConfig.mustHave.includes('6')?'productConfig.huaBei':null,
              !form.productConfig.mustHave.includes('7')?'productConfig.policy':null,
              !form.productConfig.mustHave.includes('8')?'productConfig.house':null,
              !form.productConfig.mustHave.includes('9')?'productConfig.car':null,
             ])"
             v-model="form.productConfig.mustHave" :disabled="isView">
              <el-checkbox 
               v-for="(item,index) in containHaveOption" 
               :key="index" 
               :label ="item.value"
               :disabled="form.productConfig.containHave && form.productConfig.containHave.includes(item.value)"
              >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="包含满足的条件" prop="productConfig.containHave" style="width: 50%;margin-right: 35px;">
            <el-checkbox-group
             @change="changeSelect([
              'productConfig.containCount',
              !form.productConfig.mustHave.includes('1')?'productConfig.sesame':null,
              !form.productConfig.mustHave.includes('2')?'productConfig.creditCard':null,
              !form.productConfig.mustHave.includes('3')?'productConfig.social':null,
              !form.productConfig.mustHave.includes('4')?'productConfig.fund':null,
              !form.productConfig.mustHave.includes('5')?'productConfig.baiTiao':null,
              !form.productConfig.mustHave.includes('6')?'productConfig.huaBei':null,
              !form.productConfig.mustHave.includes('7')?'productConfig.policy':null,
              !form.productConfig.mustHave.includes('8')?'productConfig.house':null,
              !form.productConfig.mustHave.includes('9')?'productConfig.car':null,
             ])"
             v-model="form.productConfig.containHave" :disabled="isView">
              <el-checkbox 
               v-for="(item,index) in containHaveOption" 
               :key="index" 
               :label ="item.value"
               :disabled="form.productConfig.mustHave && form.productConfig.mustHave.includes(item.value)"
              >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
           v-if="form.productConfig.containHave.length "
           label="包含满足的数量" 
           prop="productConfig.containCount" style="width: 50%;">
            <el-input-number 
              v-model="form.productConfig.containCount" 
              controls-position="right" 
              placeholder="请输入"
              :min="1" 
              :max="form.productConfig.containHave.length"
              style="width: 100%;"
              :disabled="isView"
            >
            </el-input-number>
          </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item 
            v-if="(form.productConfig.mustHave && form.productConfig.mustHave.includes('1'))|| (form.productConfig.containHave && form.productConfig.containHave.includes('1'))"
            label="芝麻分" prop="productConfig.sesame" style="width: 50%;margin-right: 35px;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.sesame" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in sesameOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
            v-if="(form.productConfig.mustHave && form.productConfig.mustHave.includes('2')) || (form.productConfig.containHave && form.productConfig.containHave.includes('2'))"
            label="信用卡" prop="productConfig.creditCard" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.creditCard" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in creditCardOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item
             v-if="(form.productConfig.mustHave && form.productConfig.mustHave.includes('3'))|| (form.productConfig.containHave &&form.productConfig.containHave.includes('3'))"
             label="社保" prop="productConfig.social" style="width: 50%;margin-right: 35px;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.social" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in socialOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
             v-if="(form.productConfig.mustHave && form.productConfig.mustHave.includes('4'))|| (form.productConfig.containHave && form.productConfig.containHave.includes('4'))"
             label="公积金" prop="productConfig.fund" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.fund" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in fundOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item 
              v-if="(form.productConfig.mustHave&& form.productConfig.mustHave.includes('5'))|| (form.productConfig.containHave && form.productConfig.containHave.includes('5'))"
              label="京东白条" prop="productConfig.baiTiao" style="width: 50%;margin-right: 35px;">
              <el-radio-group 
                v-removeAriaHidden v-model="form.productConfig.baiTiao" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in baiTiaoOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
             v-if="(form.productConfig.mustHave && form.productConfig.mustHave.includes('6'))|| (form.productConfig.containHave && form.productConfig.containHave.includes('6'))"
             label="花呗" prop="productConfig.huaBei" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.huaBei" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in huaBeiOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item
             v-if="(form.productConfig.mustHave && form.productConfig.mustHave.includes('7'))|| (form.productConfig.containHave &&form.productConfig.containHave.includes('7'))"
             label="保险保单" prop="productConfig.policy" style="width: 50%;margin-right: 35px;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.policy" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in policyOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
             v-if="(form.productConfig.mustHave &&form.productConfig.mustHave.includes('8'))|| (form.productConfig.containHave && form.productConfig.containHave.includes('8'))"
             label="房产信息" prop="productConfig.house" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.house" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in houseOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item 
            v-if="(form.productConfig.mustHave &&form.productConfig.mustHave.includes('9'))|| (form.productConfig.containHave && form.productConfig.containHave.includes('9'))"
            label="车产信息" prop="productConfig.car" style="flex: 1;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.car" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in carOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item label="学历" prop="productConfig.education" style="width: 50%;margin-right: 35px;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.education" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in educationOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="信用情况" prop="productConfig.credit" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.credit" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in creditOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="职业信息" prop="productConfig.jobs" style="width: 50%;margin-right: 35px;">
            <el-checkbox-group v-model="form.productConfig.jobs" :disabled="isView">
              <el-checkbox 
               v-for="(item,index) in jobsOption" 
               :key="index" 
               :label ="item.value"
               :disabled="isDisable(item.value,'jobs',filterOptions(jobsOption))"
               >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
           v-if="hasIntersection(['4','5'],form.productConfig.jobs)"
           label="营业执照" prop="productConfig.busLicense" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.busLicense" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in busLicenseOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item 
          v-if="hasIntersection(['2','3'],form.productConfig.jobs)"
          label="工资发放形式" prop="productConfig.wages" style="width: 50%;margin-right: 35px;">
            <el-checkbox-group v-model="form.productConfig.wages" :disabled="isView" >
              <el-checkbox 
               v-for="(item,index) in wagesOption" 
               :key="index" 
               :label ="item.value"
               :disabled="isDisable(item.value,'wages',filterOptions(wagesOption))"
               >{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
          v-if="hasIntersection(['2','3'],form.productConfig.jobs)"
           label="工龄" prop="productConfig.jobTime" style="width: 50%;">
            <el-checkbox-group v-model="form.productConfig.jobTime" :disabled="isView">
              <el-checkbox 
               v-for="(item,index) in jobTimeOption" 
               :key="index" 
               :label ="item.value"
               :disabled="isDisable(item.value,'jobTime',filterOptions(jobTimeOption))"
              >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item
           v-if="hasIntersection(['1','2','3'],form.productConfig.jobs)"
           label="最低月收入" prop="productConfig.minIncome" style="width: 50%;padding-right: 20px;">
            <el-input-number 
              v-model="form.productConfig.minIncome" 
              controls-position="right" 
              placeholder="请输入最低月收入(单位：元）"
              :min="0" 
              style="width: 100%;"
              :disabled="isView"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item
          v-if="hasIntersection(['4','5'],form.productConfig.jobs)"
           label="经营流水" prop="productConfig.incomeWater" 
           :style="{
            width: '50%',
            paddingLeft:hasIntersection(['1','2','3'],form.productConfig.jobs)? '20px':'0px',
            paddingRight:hasIntersection(['1','2','3'],form.productConfig.jobs)? '0px':'20px'
            }">
            <el-input-number 
              v-model="form.productConfig.incomeWater" 
              controls-position="right" 
              placeholder="请输入经营流水（具体限制金额-元）"
              :min="0" 
              style="width: 100%;"
              :disabled="isView"
            >
            </el-input-number>
          </el-form-item>
        </div>


        <div style="display: flex;">
            <el-form-item label="年龄限制" prop="productConfig.isAge" style="width: 50%;margin-right: 35px;">
              <el-radio-group
               @change="changeSelect(['productConfig.ageMin','productConfig.ageMax'])"
               v-removeAriaHidden v-model="form.productConfig.isAge" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in commonWhetherOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.productConfig.isAge">
                <el-form-item 
                 label="最小年龄" prop="productConfig.ageMin" style="width: 50%;margin-right: 35px;">
                 <el-input-number 
                   v-model="form.productConfig.ageMin" 
                   controls-position="right" 
                   placeholder="请输入"
                   :min="0" 
                   style="width: 100%;"
                   :disabled="isView"
                 >
                 </el-input-number>
                </el-form-item>
                <el-form-item label="最大年龄" prop="productConfig.ageMax" style="width: 50%;">
                  <el-input-number 
                    v-model="form.productConfig.ageMax" 
                    controls-position="right" 
                    placeholder="请输入"
                    :min="0" 
                    style="width: 100%;"
                    :disabled="isView"
                  >
                  </el-input-number>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="渠道限制" prop="productConfig.isChannel" style="width: 50%;">
              <el-radio-group
                @change="changeSelect('productConfig.channelIds')"
                v-removeAriaHidden v-model="form.productConfig.isChannel" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isChannelOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.productConfig.isChannel">
                <el-form-item label="上游渠道号" prop="productConfig.channelIds" style="flex: 1;">
                   <el-select
                    v-model="form.productConfig.channelIds"
                    multiple
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 100%"
                    :disabled="isView"
                   >
                     <el-option
                      v-for="(item, index) in deptCodeOption"
                      :key="index"
                      :label="item.productName"
                      :value="item.id"
                      ></el-option>
                   </el-select>
                </el-form-item>
              </div>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item
              label="城市限制" prop="productConfig.isCity" style="width: 50%;margin-right: 35px;">
              <el-radio-group
               @change="changeSelect('productConfig.cityCode')"
               v-removeAriaHidden v-model="form.productConfig.isCity" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isCityOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.productConfig.isCity">
                <el-form-item label="选择城市" prop="productConfig.cityCode" style="flex: 1;">
                   <el-cascader
                    ref="cascaderRef"
                    clearable
                    filterable
                    v-model="form.productConfig.cityCode"
                    v-removeAriaHidden
                    @change="cascaderChangeFun"
                    :options="areaList"
                    :props="{
                      value: 'code',
                      label: 'name',
                      children: 'list',
                      emitPath: false,
                      checkStrictly: false,
                      multiple:true
                    }"
                    :disabled="isView"
                    placeholder="请选择省市"
                    style="width: 100%"
                  ></el-cascader>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="分时段限制" prop="productConfig.isDay" style="width: 50%;">
              <el-radio-group v-removeAriaHidden v-model="form.productConfig.isDay" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in commonWhetherOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="星期限制" prop="productConfig.isWeek" style="width: 50%;margin-right: 35px;">
              <el-radio-group
                @change="changeSelect('productConfig.weekDay',[])"
                v-removeAriaHidden v-model="form.productConfig.isWeek" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in commonWhetherOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.productConfig.isWeek">
                <el-form-item label="星期" prop="productConfig.weekDay" style="flex: 1;">
                  <el-checkbox-group v-model="form.productConfig.weekDay" :disabled="isView">
                   <el-checkbox 
                    v-for="(item,index) in weekDayOption" 
                    :key="index" 
                    :label ="item.value">{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="限制借贷金额" prop="productConfig.isMoney" style="width: 50%;">
              <el-radio-group
                @change="changeSelect('productConfig.loanMoney')"
                v-removeAriaHidden v-model="form.productConfig.isMoney" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in commonWhetherOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.productConfig.isMoney">
                <el-form-item label="最低贷款金额限制" prop="productConfig.loanMoney" style="flex: 1;">
                  <el-input-number 
                    v-model="form.productConfig.loanMoney" 
                    controls-position="right" 
                    placeholder="请输入"
                    :min="0" 
                    style="width: 100%;"
                    :disabled="isView"
                  >
                  </el-input-number>
                </el-form-item>
              </div>
            </el-form-item>
        </div>
         <div class="flex-sb">
            <el-form-item label="备注" prop="productConfig.remarks" style="flex: 1;">
              <el-input
                v-model="form.productConfig.remarks"
                placeholder="请输入"
                type="textarea"
                clearable
                :disabled="isView"
              />
            </el-form-item>
          </div>
        </template>
        <div style="display: flex;">
          <el-form-item label="每日推送限制数量" prop="productConfig.dayCount" style="width: 50%;padding-right: 20px;">
            <el-input-number 
              v-model="form.productConfig.dayCount" 
              controls-position="right" 
              placeholder="请输入"
              :min="0" 
              style="width: 100%;"
              :disabled="isView"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="撞库时间限制" prop="isTime" style="width: 50%;padding-left: 20px;">
             <el-radio-group
                v-removeAriaHidden 
                v-model="form.isTime" 
                :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isTimeOption" 
                 :key="index" 
                 :label="item.value">
                 {{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="flex-sb" v-if="form.isTime">
               <el-time-picker
                style="width: 100%"
                is-range
                v-model="isTimeRange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm"
                format="HH:mm"
                >
              </el-time-picker>
              </div>
          </el-form-item>
        </div>
        
      </div>
    </div>
    <!-- 产品结算规则 -->
    <div class="settlementRules">
      <div class="ch_title">产品结算规则</div>
      <div class="content">
        <div style="display: flex;">
            <el-form-item label="结算模式" prop="downRewardType" style="width: 50%;margin-right: 35px;">
              <el-radio-group
                @change="changeSelect(['downPriceMoney','downRewardRatio'])"
                v-removeAriaHidden v-model="form.downRewardType" :disabled="isView">
                <el-radio v-for="(item,index) in downRewardTypOption" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
              
            </el-form-item>
            <el-form-item :label-width="device === 'desktop'?'80px':''"  v-if="form.downRewardType === 0" label="机构价格" prop="downPriceMoney" style="width: 50%">
              <el-input-number 
                v-model="form.downPriceMoney" 
                controls-position="right" 
                placeholder="机构价格(我们抽取下游的价格-单位元)"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item :label-width="device === 'desktop'?'80px':''" v-if="form.downRewardType === 1" label="结算比例" prop="downRewardRatio" style="width: 50%">
              <el-input-number 
                v-model="form.downRewardRatio" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
        </div>
      </div> 
    </div>
   </el-form>
   <!--  提交按钮区域-->
   <div class="btn flex-center" v-if="!isView">
     <el-button @click="clickCancle">取 消</el-button>
     <el-button type="primary" @click="handleSubmit('formRef')">保存</el-button>
   </div>
  </div>
</template>

<script>
import {getDwnCompanyList} from '@/api/business/downCompanyManagement'
import {getUpChannelList} from '@/api/business/channelManagement'
import {addOrEditDownProduct,getDownProductById} from '@/api/business/productManagement'
import {getAreaCodeTreeList} from '@/api/system/areaCode'
import { mapGetters } from "vuex";

export default {
  name: 'Detail',
  data() {
    return {
      // 表单信息
      form: {
        // productAttach:{
        //   // 标签集合
        //   labelList:[]
        // },
        productConfig:{
          // 检查前置条件设置默认值
          isFront:0,
          wages:[],
          jobTime:[],
          jobs:[],
          mustHave:[],
          containHave:[],
          weekDay:[],
        },
        // 结算模式设置默认值
        downRewardType:0,
        // 可查询时间(天-默认7天)
        queryTime:7,
        // 手机号验证默认否
        isPhone:0,
        // 二要素验证默认否
        isUser:0,
        // 授权文件格式默认 0
        isHtml:0,
        // 授权文件类型默认 0
        isMd5:0,
      },
      // 路由参数对象
      query:{
        
      },
      // 表单校验规则
      rules: {
        productName:[
          { required: true, message: "请填写机构产品名称", trigger: "blur" },
        ],
        productType:[
          { required: true, message: "请选择机构类型", trigger: "change" },
        ],
        companyId:[
          { required: true, message: "请选择关联公司", trigger: "change" },
        ],
        'productConfig.containCount':[
          { required: true, message: "请填写包含满足的数量", trigger: "blur" },
        ]
      },
      // 产品类别筛选项
      productTypeOption:[
        { label: "api全流程", value: 1 },
        { label: "api-半流程", value: 2 },
        { label: "CRM(用我们系统)", value: 3 },
        { label: "企微", value: 4 },
      ],
      // 产品标签筛选项
      productLabelOption:[
        { label: "平台", value: 1 },
        { label: "机构", value: 2 },
      ],
      // 产品状态筛选项
      statusOption:[
        { label: "在线", value: 0 },
        { label: "下线", value: 1 },
        { label: "停用", value: 2 },
      ],
      // 推送间隔开关筛选项
      isGapOption:[
        { label: "关闭", value: 0 },
        { label: "开启", value: 1 },
      ],
      // 是否需要回调筛选项
      isBackOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 授权文件格式筛选项
      isHtmlOption:[
        { label: "docx", value: 0 },
        { label: "html", value: 1 },
      ],
      // 授权文件类型筛选项
      isMd5Option:[
        { label: "随机", value: 0 },
        { label: "md5", value: 1 },
      ],
      // 流程模式筛选项
      halfStatusOption:[
        { label: "新模式", value: 0 },
        { label: "旧模式", value: 1 },
      ],
      // 半流程（旧）推送模式筛选项
      halfTypeOption:[
        { label: "授权前推送", value: 0 },
        { label: "授权后推送", value: 1 },
      ],
      // 掩码类型
      maskLenOption:[
        { label: "MD5撞库", value: 0 },
        { label: "表单直推", value: 1 },
        { label: "八位掩码", value: 8 },
        { label: "九位掩码", value: 9 },
      ],
      // 撞库类型
      isAllOption:[
        { label: "全资", value: 0 },
        { label: "非全资", value: 1 },
      ],
      // 车抵
      isCarOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 方案限制筛选项
      caseTypeOption:[
        { label: "无限制", value: 0 },
        { label: "只接api全流程", value: 1 },
        { label: "只接api半流程", value: 2 },
        { label: "H5接半流程", value: 3 },
      ],
      // 数据接收限制筛选项
      pushTypeOption:[
        { label: "无限制", value: 0 },
        { label: "只接平台", value: 1 },
        { label: "只接机构", value: 2 },
      ],
      // 数据推送限制筛选项
      pushWeightOption:[
        { label: "撞库", value: 0 },
        { label: "直推", value: 1 },
      ],
      // 结算模式筛选项
      downRewardTypOption:[
        { label: "固定", value: 0 },
        { label: "分润", value: 1 },
      ],
      // 京东白条筛选项
      baiTiaoOption:[
        { label: "无", value: 0 },
        { label: "有", value: 1 },
      ],
      // 营业执照筛选项
      busLicenseOption:[
        { label: "无限制", value: 0 },
        { label: "两年以下", value: 1 },
        { label: "两年以上", value: 2 },
      ],
      // 车产信息筛选项
      carOption:[
        { label: "无限制", value: 0 },
        { label: "按揭车及全款车", value: 1 },
        { label: "全款车", value: 2 },
      ],
      // 信用情况筛选项
      creditOption:[
        { label: "无限制", value: 0 },
        { label: "有逾期", value: 1 },
        { label: "无逾期", value: 2 },
      ],
      // 信用卡筛选项
      creditCardOption:[
        { label: "无限制", value: 0 },
        { label: "1元及以上", value: 1 },
        { label: "2万元及以上", value: 2 },
      ],
      // 学历筛选项
      educationOption:[
        { label: "无限制", value: 0 },
        { label: "初中及以上", value: 1 },
        { label: "高中及以上", value: 2 },
        { label: "大专及以上", value: 3 },
        { label: "本科及以上", value: 4 },
        { label: "研究生及以上", value: 5 },
      ],
      // 公积金筛选项
      fundOption:[
        { label: "无限制", value: 0 },
        { label: "1月及以上", value: 1 },
        { label: "6个月及以上", value: 2 },
      ],
      // 房产信息筛选项
      houseOption:[
        { label: "无限制", value: 0 },
        { label: "按揭房产及全款房产", value: 1 },
        { label: "全款房产", value: 2 },
      ],
      // 花呗筛选项
      huaBeiOption:[
        { label: "无", value: 0 },
        { label: "有", value: 1 },
      ],
      // 保险保单筛选项
      policyOption:[
        { label: "无限制", value: 0 },
        { label: "1月及以上", value: 1 },
        { label: "1年及以上", value: 2 },
      ],
      // 芝麻分筛选项
      sesameOption:[
        { label: "无限制", value: 0 },
        { label: "1分及以上", value: 1 },
        { label: "550及以上", value: 2 },
        { label: "600及以上", value: 3 },
        { label: "650及以上", value: 4 },
        { label: "700分及以上", value: 5 },
      ],
      // 社保筛选项
      socialOption:[
        { label: "无限制", value: 0 },
        { label: "1月及以上", value: 1 },
        { label: "6个月及以上", value: 2 },
      ],
      // 包含满足的条件筛选项
      containHaveOption:[
        { label: "芝麻分", value: '1' },
        { label: "信用卡", value: '2' },
        { label: "社保", value: '3' },
        { label: "公积金", value: '4' },
        { label: "京东白条", value: '5' },
        { label: "花呗", value: '6' },
        { label: "保单", value: '7' },
        { label: "房产", value: '8' },
        { label: "车产", value: '9' },
      ],
       // 工资发放形式筛选项
       wagesOption:[
        { label: "无限制", value: '0' },
        { label: "银行卡", value: '1' },
        { label: "现金", value: '2' },
        { label: "银行转账", value: '3' },
        { label: "微信转账/支付宝转账", value: '4' },
      ],
      // 工龄筛选项
      jobTimeOption:[
        { label: "无限制", value: '0' },
        { label: "0-6个月", value: '1' },
        { label: "6-12个月", value: '2' },
        { label: "12个月以上", value: '3' },
      ],
      // 职业信息筛选项
      jobsOption:[
        { label: "无限制", value: '0' },
        { label: "自由职业者", value: '1' },
        { label: "上班族", value: '2' },
        { label: "公务员/事业/国企", value: '3' },
        { label: "企业主", value: '4' },
        { label: "个体户", value: '5' },
      ],



      // 通用是否筛选项
      commonWhetherOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 渠道限制筛选项
      isChannelOption:[
        { label: "无限制", value: 0 },
        { label: "排除渠道", value: 1 },
        { label: "包含渠道", value: 2 },
      ],
      // 城市限制筛选项
      isCityOption:[
        { label: "否", value: 0 },
        { label: "排除", value: 1 },
        { label: "包含", value: 2 },
      ],
      // 检查前置条件筛选项
      isFrontOption:[
        { label: "不检查", value: 0 },
        { label: "检查", value: 1 },
      ],
      // 星期筛选项
      weekDayOption:[
        { label: "星期一", value: '1' },
        { label: "星期二", value: '2' },
        { label: "星期三", value: '3' },
        { label: "星期四", value: '4' },
        { label: "星期五", value: '5' },
        { label: "星期六", value: '6' },
        { label: "星期日", value: '7' },
      ],
      // 撞库时间限制筛选项
      isTimeOption:[
        { label: "全天", value: 0 },
        { label: "时段", value: 1 },
      ],
      // 撞库时间限制时间点范围
      isTimeRange:null,

      // 新增标签的状态
      inputVisible: false,
      // 新增标签的值
      inputValue: '',

      // 关联公司筛选项
      companyIdOption: [],
      // 下游渠道号筛选项
      deptCodeOption:[],


      // 全国省市区列表(树型结构)
      areaList: [],


      // 详情信息加载状态
      loading:false,
      // 工资发放形式禁用数组
      wagesDisbledArr:[]
    };
  },
  created(){
    this.getcompanyIdList()
    this.getDeptCodeList()
    this.getProvinceCityList()
    console.log('传过来的参数',this.$route.query);
    if(this.$route?.query?.id){
      this.query = this.$route.query
      this.getProductById(this.$route.query?.id)
    }
  },
  computed:{
    ...mapGetters(["device"]),
    // 判断当前是否处于查看操作
    isView(){
      return this.query?.type == "view"
    },
    // 判断当前是否处于新增操作
    isAdd(){
      return !!this.query?.id
    },
    // 判断多选框是否禁用
    isDisable(){
      let form = this?.form
      return (value,prop,completeArr)=>{
        if(form?.productConfig?.[prop]?.length){ 
          if(form?.productConfig?.[prop][0]==='0'){
             return completeArr.slice(1).includes(value)
          }else{
             return ['0'].includes(value)
          }
        }
        return false
      }
    },
  },
  methods: {
    // 级联筛选器改变事件
    cascaderChangeFun(){
      const cascader = this.$refs.cascaderRef;
      if (cascader) {
        if (cascader.handleClear) {
          cascader.handleClear(); // 清除 UI 上的输入和选中
        }
        // if (cascader.handleExpandChange) {
        //   cascader.handleExpandChange([]); // 重置展开路径，回到根节点
        // }
      }
      // 强制更新组件
      this.$forceUpdate();
    },
    // 判断两个数字是否有交集
    hasIntersection(arr1, arr2) {
      return arr1.some(item => arr2?.includes(item));
    },
    // 过滤出options的value
    filterOptions(options){
      return options.map(item=>item.value)
    },
    // 根据产品id查询产品详细信息
    getProductById(id){ 
      this.loading = true;
       getDownProductById(id).then(res=>{
          console.log(res);
          this.form = res?.data
          // 处理回传的撞库时间限制时间点范围
          if(res?.data?.isTime == 1){
            this.isTimeRange = [res.data.startTime, res.data.endTime];
          }
          this.loading = false          
       })
    },
     // 获取关联公司列表
    getcompanyIdList() {
      getDwnCompanyList().then((res) => {
        this.companyIdOption = res.data;
      });
    },
    // 获取渠道列表
    getDeptCodeList(){
      getUpChannelList().then(res=>{
        this.deptCodeOption = res.data
      })
    },
    // 获取全国省市区列表
    getProvinceCityList() {
      getAreaCodeTreeList().then((res) => {
        this.areaList = res?.data;
      });
    },
    // 图片上传的回调
    fileUploadFunction(url){
       this.$set(this.form,'logoUrl',url)
       // 如果处于半流程才设置图片
       if(this?.form?.productType === 2){
         this.$set(this.form?.productAttach,'productLogo',url)
       }
    },
    // 切换选择器删除控制的属性
    changeSelect(prop,defalutValue){
      // 如果是数组则循环删除
      if(Array.isArray(prop)){
        prop.forEach(item=>{
          this.deleteProp(item,defalutValue)
        })
      }else{
        this.deleteProp(prop,defalutValue)
      }
    },
    deleteProp(prop,defalutValue){
      if(prop === null) return
      if(prop.includes('.')){
           let [key,value] = prop.split('.')
           if(defalutValue){
             this.$set(this.form[key],value,defalutValue)
             return
           }
           this.$delete(this.form[key],value)
           return
       }
       this.$delete(this.form,prop)
    },
    // 关闭标签
    handleClose(tag) {
        this.form.productAttach.labelList.splice(this.form.productAttach.labelList.indexOf(tag), 1);
    },
    // 新增标签
    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
    },
    // 失焦后触发
    handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          if(this.form?.productAttach?.labelList == null){
            this.form.productAttach.labelList = []
          }
          this.form?.productAttach?.labelList?.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
    },


    clickCancle(){
      this.$message.info('取消操作')
      // 关闭当前页签
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一个页面
      this.$router.go(-1)
    },
    /*重置变动数据*/
    remeitForm(){
      this.$refs['formRef'].resetFields();
      this.form = this.$options.data().form;
      this.$set(this,'isTimeRange',null)
    },
    /*提交操作*/
    handleSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.form))
          // 如果包含满足条件清空则包含数量设置0
          if(!params?.productConfig?.containHave?.length){
            params.productConfig.containCount = 0
          }
          // 手机号验证毛利转化为两位小数字符串
          if(params.phoneMoney != null){
              params.phoneMoney = params.phoneMoney.toFixed(2)
          }
          // 二要素验证毛利转化为两位小数字符串
          if(params.userMoney != null){
              params.userMoney = params.userMoney.toFixed(2)
          }
          // 对撞库时间限制进行处理
          if(params.isTime != null && params?.isTime == 1){
            if (this.isTimeRange?.length) {
              params.startTime =  this.isTimeRange[0];
              params.endTime = this.isTimeRange[1];
            } else {
              delete params.startTime;
              delete params.endTime;
            }
          }else{
            this.$set(this,'isTimeRange',null)
          }
          // 若this?.query?.id不存在表示新增,否则为编辑
          addOrEditDownProduct(params).then(res=>{
              if(res.code === 200) {
                if(!this?.query?.id){
                  this.$message.success('添加成功')
                }else{
                  this.$message.success('编辑成功')
                }
                this.query = {}
                this.remeitForm()
                // 关闭当前页签
                this.$store.dispatch('tagsView/delView', this.$route)
                // 返回上一个页面
                this.$router.go(-1)
              }
            })
        }
      })
    },
  }
};
</script>

<style scoped lang='scss'>
.ch_title{
  color: #409EFF;
  font-weight: 500;
}
.content{
  margin: 20px 0 20px;
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}

</style>
<style scoped>
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<style scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
::v-deep .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>